<template>
  <div class="body">
    <el-card>
      <!-- 考试信息 -->
      <el-descriptions
        title="考试信息"
        direction="horizontal"
        :column="2"
        border
      >
        <el-descriptions-item label="考试名称"
          >2021年语文期中考试</el-descriptions-item
        >
        <el-descriptions-item label="考试时间"
          >2021-05-21 14:00:00-16:00:00</el-descriptions-item
        >
        <el-descriptions-item label="参加限制"
          >考试开始15分钟</el-descriptions-item
        >
        <el-descriptions-item label="答题时间">60分钟 </el-descriptions-item>
        <el-descriptions-item label="交卷限制"
          >考试结束之前15分钟
        </el-descriptions-item>
        <el-descriptions-item label="考试说明">常规考试 </el-descriptions-item>
        <el-descriptions-item label="考试提醒">开启 </el-descriptions-item>
        <el-descriptions-item label="提醒时间">15分钟 </el-descriptions-item>
        <el-descriptions-item label="考生须知"
          >服从考试安排
        </el-descriptions-item>
      </el-descriptions>
      <!-- 试卷信息 -->
      <el-descriptions
        title="试卷信息"
        direction="horizontal"
        :column="2"
        border
      >
        <el-descriptions-item label="选择试卷">语文试卷</el-descriptions-item>
        <el-descriptions-item label="试卷难度">容易</el-descriptions-item>
        <el-descriptions-item label="试题排序">固定排序</el-descriptions-item>
        <el-descriptions-item label="选项排序">固定排序 </el-descriptions-item>
        <el-descriptions-item label="合格分数">60分 </el-descriptions-item>
      </el-descriptions>
      <!-- 考生信息 -->
      <el-descriptions title="考生信息" direction="vertical" :column="6" border>
        <el-descriptions-item label="序号">1</el-descriptions-item>
        <el-descriptions-item label="姓名">张三</el-descriptions-item>
        <el-descriptions-item label="证件号"
          >345783092384924
        </el-descriptions-item>
        <el-descriptions-item label="性别">男 </el-descriptions-item>
        <el-descriptions-item label="联系电话"
          >15609090808
        </el-descriptions-item>
      </el-descriptions>
      <!-- 审批意见 -->
      <el-descriptions
        class="margin-top"
        title="审批流转记录"
        :column="1"
        direction="horizontal"
        colon
      >
      </el-descriptions>
      <el-card class="mt12">
        <div class="flex1">
          <div>
            <div style="line-height: 40px">
              <span class="label">二级审批人：</span>
              <span>孙老师</span>
            </div>
            <div style="line-height: 40px">
              <span class="label">审核结果：</span>
              <span style="color: #27892a">通过</span>
            </div>
            <div style="line-height: 40px">
              <span class="label">审批意见：</span>
              <span>本次考试符合教学实际，予以通过</span>
            </div>
          </div>
          <div>2021-6-20 10:31</div>
        </div>
      </el-card>
      <el-card class="mt12">
        <div class="flex1">
          <div>
            <div style="line-height: 40px">
              <span class="label">一级审批人：</span>
              <span>孟老师</span>
            </div>
            <div style="line-height: 40px">
              <span class="label">审核结果：</span>
              <span style="color: #27892a">通过</span>
            </div>
            <div style="line-height: 40px">
              <span class="label">审批意见：</span>
              <span>本次考试符合教学实际，予以通过</span>
            </div>
          </div>
          <div>2021-6-20 10:31</div>
        </div>
      </el-card>
      <el-card class="mt12">
        <div class="flex1">
          <div>申请人：李老师</div>
          <div>2021-6-20 10:31</div>
        </div>
      </el-card>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 0,
    };
  },
  methods: {},
  created() {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  padding: 20px;
  ::v-deep .el-input__inner {
    height: 30px;
  }
  .label {
    width: 100px;
    display: inline-block;
    text-align: right;
  }
  .mt12 {
    margin-top: 12px;
  }
  .flex1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flex {
    display: flex;
    justify-content: center;
  }
  ::v-deep .el-descriptions {
    margin-top: 12px;
  }
}
</style>
